<template>
	<view class="provit">
		<view class="titles">
			<text>VIP权益</text>
			<view class="vip_rule" @click="goRuleDetail">
				会员规则
				<uni-icons type="arrowright" size="14" color="#838383"></uni-icons>
			</view>
		</view>

		<view class="equity">
			<view class="equity_one">
				<text>可获得</text>
				<text class="color2">下级红包收益</text>
				<text class="red_text">25%</text>
				<text class="color3">总分佣</text>
			</view>
			<view class="equity_one">
				<text>可获得</text>
				<text class="color2">价值</text>
				<text class="red_text">￥288</text>
				<text class="color3">精美商品</text>
				<view class="view_shop" @click="goShopDetail(shop)" v-for="(shop,index) in shoplist" :key="index">
					<!-- 查看商品
					<uni-icons type="arrowright" size="16" color="#838383"></uni-icons> -->
					{{shop.name}}
				</view>
			</view>
			<view class="equity_one">
				<text>可获得</text>
				<text class="color2">总价值</text>
				<text class="red_text">￥{{account}}</text>
				<text class="color3">代金券</text>
				<text class="color3">分12个月赠送</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import {
		vipShopList,
		couponsTotalAccount
	} from "@/api/my/my.js";
	export default {
		name: "vipprofit",

		data() {
			return {
				shoplist: [],
				account:"",
			}
		},
		created() {
			this.getVipShop();
			this.getRecords();
		},
		computed: {
			...mapState(['userinfo']),
		},
		methods: {
			// 获取会员总价
			async getRecords() {
				const res = await couponsTotalAccount();
				this.account = res.data.account;
			},
			goRuleDetail() {
				uni.navigateTo({
					url: '/pagesA/my/rules/ruleDetail?type=17'
				})
			},
			goShopDetail(i) {
				uni.navigateTo({
					url: `/pages/shopping/commodity/detail/index?id=${encodeURIComponent(i.id)}`
				})
			},
			// 获取会员商品
			getVipShop() {
				vipShopList().then(({
					data: {
						goodsInfo
					}
				}) => {
					this.shoplist = goodsInfo;
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "../my/my.scss";

	.titles {
		@include flexLayout(center, space-between);
		font-size: 32rpx;
		font-weight: 500;
		margin: 50rpx 0 26rpx;
		color: #070707;

		.vip_rule {
			@include flexLayout(center, flex-start);
			color: #795B26;
			font-size: 24rpx;
		}
	}

	.equity {
		@include flexLayout(center, center);
		color: #7A613D;
		font-size: 26rpx;

		&_one {
			width: 32.1%;
			height: 350rpx;
			line-height: 58rpx;
			background: linear-gradient(90deg, #FBEEDA 0%, #FBF3E6 100%);
			border-radius: 14rpx;
			border: 2rpx solid #F7DBB2;
			padding-top: 20rpx;
			@include flexLayout(center, flex-start);
			flex-direction: column;

			.view_shop {
				height: 40rpx;
				color: #D9A13F;
				font-size: 24rpx;
				width: 90%;
				@include exceedFlow(1);
				text-align: center;
			}

			.color2 {
				color: #564C32;
				font-size: 24rpx;
			}

			.red_text {
				color: #F54642;
				font-size: 38rpx;
			}

			.color3 {
				font-size: 24rpx;
				color: #503808;
			}
		}

		&_one:not(:first-child) {
			margin-left: 1.85%;
		}
	}
</style>
